<script>
/*
 * @Author: Your name
 * @Date:   2020-06-25 14:44:54
 * @Last Modified by:   Your name
 * @Last Modified time: 2020-07-03 11:56:15
 */
</script>
<template>
    <swiper>
        <swiper-item v-for="item in bannerList" :key="item.link">
            <a :href="item.link">
                <img :src="item.image" alt="null" @load="swiperImgLoad">
            </a>
        </swiper-item>
    </swiper>
</template>
<script>
import {request} from '../../../network/request.js';
import {getHomeMultidata} from '../../../network/home.js';
import {Swiper, SwiperItem} from '../../../components/common/swiper/index.js';

export default {
    data(){
        return {
            bannerList:[],
            isLoaded:false
        }
    },
    components:{
        Swiper,SwiperItem
    },
    created(){
        //获取轮播图数据
        getHomeMultidata()
        .then(res => {
            this.bannerList = res.data.banner.list;
            // console.log("轮播图数据",res.data.banner.list);
        })
        .catch(error => {
            console.log(error);
        })
    },
    methods:{
        //检测轮播图的图片是否加载完成，加载完成后再计算tabcontrol的offsettop属性
        //(因为其他图片相比轮播图图片的影响相对较小，如果获取到的offsettop值还是有问题，那么就对同其他图片也进行监听是否加载完成)
        swiperImgLoad(){
            if(!this.isLoaded){
                //只让他向父组件发送一次函数
                this.$emit('swiperIsLoad');
                this.isLoaded = true;
            }
            
        }
    }
}
</script>
<style lang="css">
    
</style>